<template>
  <div class="el-custom-from">
    <el-tabs v-loading="formLoading">
      <el-tab-pane>
        <template #label>
          <div>
            <span class="font_16px">
              <i class="el-icon-edit"></i>
              {{ pageTitle }}
            </span>
          </div>
        </template>
        <div id="From_div_style" :style="autoHeight">
          <el-container>
            <el-main id="el-custom-form-main">
              <div class="container" :style="contentHeight">
                <el-scrollbar>
                  <el-form
                    ref="formData"
                    :model="formModel"
                    label-width="120px"
                    class="demo-ruleForm"
                    size="mini"
                  >
                    <el-row>
                      <el-col :span="12">
                        <el-form-item
                          class="el-from-custom-item"
                          :label="$t('formi18n.form_cnname')"
                          prop="cnName"
                          :rules="[{'required':true,'message':$t('formi18n.form_current_field_required'),'trigger':'blur'},{'min':1,'max':50,'message':$t('formi18n.form_current_field_maxlength'),'trigger':'blur'}]"
                        >
                          <el-input
                            v-model="formModel.cnName"
                            type="text"
                            autocomplete="off"
                            maxlength="50"
                            :disabled="view=='view'"
                          ></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item
                          class="el-from-custom-item"
                          :label="$t('formi18n.form_enname')"
                          prop="enName"
                          :rules="[{'required':true,'message':$t('formi18n.form_current_field_required'),'trigger':'blur'},{'min':1,'max':50,'message':$t('formi18n.form_current_field_maxlength'),'trigger':'blur'}]"
                        >
                          <el-input
                            v-model="formModel.enName"
                            type="text"
                            autocomplete="off"
                            maxlength="50"
                            :disabled="view=='view'"
                          ></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <el-form-item
                          :label="$t('formi18n.form_useApplicantEmpId')"
                          prop="useApplicantEmpId"
                          :rules="[{'required':true,'message':$t('formi18n.form_current_field_required'),'trigger':'change'}]"
                          class="el-from-custom-item"
                        >
                          <el-radio-group
                            v-model="formModel.useApplicantEmpId"
                            size="small"
                            @change=" this.formModel.tables=[];"
                            :disabled="view=='view'||view=='edit'"
                          >
                            <el-radio-button :label="1==1">{{ $t("i18n.glpbal_yes") }}</el-radio-button>
                            <el-radio-button :label="1==0">{{ $t("i18n.glpbal_no") }}</el-radio-button>
                          </el-radio-group>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <el-form-item
                          :label="$t('formi18n.form_field_tables')"
                          :rules="[{'required':true,'message':$t('formi18n.form_current_field_required'),'trigger':'blur'}]"
                          prop="tables"
                          class="el-from-custom-item"
                        >
                          <div class="handle-box" v-if="view=='add'">
                            <el-row>
                              <el-col>
                                <el-button
                                  type="primary"
                                  icon="el-icon-plus"
                                  size="mini"
                                  @click="tableAddEvent()"
                                >{{$t("i18n.co_add") }}</el-button>
                              </el-col>
                            </el-row>
                          </div>
                          <div class="table-row-container">
                            <div v-for="item in formModel.tables" :key="item.id">
                              <!-- 主表数据信息 -->
                              <el-form-item
                                size="small"
                                :label="$t('formi18n.form_tables')"
                                label-width="60px"
                                class="el-from-custom-item"
                              >
                                <table-componets-vue
                                  :isShowButton="true"
                                  @tableEvent="tableEvent"
                                  :tables="{
                                body: [item],
                                header: headers, 
                             }"
                                  :Select="'MultiSelect'"
                                  :ref="'form_tables_multipleTable'"
                                  :isOpertions="1==0"
                                  :maxheight="240"
                                  :fieldkey="{
                                fieldKey: 'tables',
                          }"
                                ></table-componets-vue>
                              </el-form-item>
                              <!-- 子表数据信息 -->
                              <el-form-item
                                size="small"
                                :label="$t('formi18n.form_child_tables')"
                                label-width="60px"
                                class="el-from-custom-item"
                              >
                                <table-componets-vue
                                  :isShowButton="true"
                                  @tableEvent="(data)=>tableEvent(data,item)"
                                  :tables="{
                                body: item.childs,
                                header: headers,
                                operations: options,
                             }"
                                  :Select="'MultiSelect'"
                                  :ref="item.tableCode+'form_child_tables'"
                                  :isOpertions="[item].length>0&&view!='view'"
                                  :maxheight="240"
                                  :fieldkey="{
                                fieldKey: 'tables',
                          }"
                                ></table-componets-vue>
                              </el-form-item>
                              <div class="handle-box" v-if="view=='add'&&formModel.useApplicantEmpId">
                                <el-row>
                                  <el-col>
                                    <el-button
                                      type="danger"
                                      icon="el-icon-delete"
                                      size="mini"
                                      @click="tableDeleteEvent(item)"
                                    >{{$t("i18n.co_del") }}</el-button>
                                  </el-col>
                                </el-row>
                              </div>
                              <el-divider border-style="double"></el-divider>
                            </div>
                          </div>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </el-scrollbar>
              </div>
            </el-main>
            <el-footer>
              <div class="form_handle-box">
                <el-button
                  v-if="pageType != 'view' && pageType != null"
                  plain
                  type="primary"
                  @click="SaveEvent()"
                  size="mini"
                >{{ $t("table.Global_Save") }}</el-button>

                <el-button
                  plain
                  type="danger"
                  @click="BackEvent()"
                  size="mini"
                >{{ $t("table.Global_Back") }}</el-button>
              </div>
            </el-footer>
          </el-container>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="el-dialog-content">
      <dialog-form-primary-table-componet-vue ref="tableinfo" @confirmEvent="dialogConfirmEvent"></dialog-form-primary-table-componet-vue>
      <dialog-form-childs-table-componet-vue
        ref="childtableinfo"
        @confirmEvent="dialogChildConfirmEvent"
      ></dialog-form-childs-table-componet-vue>
    </div>
  </div>
</template>
<script>
import reqVue from "../../utils/req.vue";
import TableComponetsVue from "../TableComponets.vue";
import DialogFormPrimaryTableComponetVue from "./DialogFormPrimaryTableComponet.vue";
import DialogFormChildsTableComponetVue from "./DialogFormChildsTableComponet.vue";

let windowHeight = parseInt(window.innerHeight);
export default {
  components: {
    DialogFormPrimaryTableComponetVue,
    TableComponetsVue,
    DialogFormChildsTableComponetVue
  },
  props: {
    pageTitle: {
      type: String
    },
    pageType: {
      type: String
    },
    apipath: {
      type: String
    },
    getway: {
      type: String
    }
  },
  data() {
    return {
      autoHeight: {
        height: "",
        width: "96%",
        margin: "11px",
        float: "left"
      },
      config: [],
      formModel: {},
      contentHeight: {
        height: ""
      },
      formLoading: false,
      singeData: {},
      innerDrawer: false,
      dialogInPut: {},
      exceptParamters: {},
      way: this.getway,
      api: this.apipath,
      view: "",
      ///列表需要带的按钮
      options: [
        {
          icon: "el-icon-plus",
          keyFieldValue: "",
          label: this.$t("i18n.co_add"),
          primaryKeyValue: 0,
          shape: "",
          size: "mini",
          type: "",
          value: "add"
        },
        {
          icon: "el-icon-delete",
          keyFieldValue: "",
          label: this.$t("i18n.co_del"),
          primaryKeyValue: 0,
          shape: "",
          size: "mini",
          type: "danger",
          value: "delete"
        }
      ],
      ///列表标题固定
      headers: [
        {
          key: "tableCode",
          name: this.$t("formi18n.form_field_tablecode"),
          width: 0,
          hide: false,
          isOperation: false,
          isTag: false,
          isButton: false,
          isOtherStyle: false,
          isIcon: false,
          align: "left",
          options: [],
          rules: [],
          show: false,
          editor: false,
          controlType: 0,
          fixed: false,
          type: "primary_key"
        },
        {
          key: "tableName",
          name: this.$t("formi18n.form_field_tablename"),
          width: 0,
          hide: false,
          isOperation: false,
          isTag: false,
          isButton: false,
          isOtherStyle: false,
          isIcon: false,
          align: "left",
          options: [],
          rules: [],
          show: true,
          editor: false,
          controlType: 0,
          fixed: false
        },
        {
          key: "foreignKey",
          name: this.$t("formi18n.form_field_tablecode"),
          width: 0,
          hide: true,
          isOperation: false,
          isTag: false,
          isButton: false,
          isOtherStyle: false,
          isIcon: false,
          align: "left",
          options: [],
          rules: [],
          show: true,
          editor: false,
          controlType: 0,
          fixed: false
        },
        {
          key: "flowTableCode",
          name: this.$t("formi18n.form_field_tablecode"),
          width: 0,
          hide: true,
          isOperation: false,
          isTag: false,
          isButton: false,
          isOtherStyle: false,
          isIcon: false,
          align: "left",
          options: [],
          rules: [],
          show: true,
          editor: false,
          controlType: 0,
          fixed: false
        },
        {
          key: "autoId",
          name: this.$t("formi18n.form_field_tablecode"),
          width: 0,
          hide: true,
          isOperation: false,
          isTag: false,
          isButton: false,
          isOtherStyle: false,
          isIcon: false,
          align: "left",
          options: [],
          rules: [],
          show: true,
          editor: false,
          controlType: 0,
          fixed: false
        }
      ]
    };
  },
  methods: {
    ///设置窗台的高度
    getHeight() {
      this.autoHeight.height = windowHeight - 60 + "px";
      this.contentHeight.height = windowHeight - 200 + "px";
    },
    ///加载表单数据
    LoadModel(btn, viewtype) {
      this.view = viewtype;
      this.formLoading = true;
      reqVue
        .$Post(null, this.api + "/v1.0/get/" + btn.primaryKeyValue, this.way)
        .then(
          function(data) {
            if (data.status) {
              this.formModel = data.body;
              this.formLoading = false;
              this.$refs["formData"].resetFields();
            } else {
              this.formLoading = false;
            }
          }.bind(this)
        );
    },
    ///添加表信息
    tableAddEvent() {
      this.$refs.tableinfo.paramters = {
        selectType: this.formModel.useApplicantEmpId?1:0,
        data: this.formModel.tables
      };
      this.$refs.tableinfo.dialogTableInfoVisible = true;
      this.$refs.tableinfo.InitTable(null);
    },
    ///删除当前节点
    tableDeleteEvent(currentNode) {
      let res = this.formModel.tables.filter(
        c => c.tableCode != currentNode.tableCode
      );
      this.formModel.tables = res;
    },
    ///弹出框保存信息
    dialogConfirmEvent(res) {
      this.formModel.tables = res.result;
    },
    ///子表操作
    tableEvent(item, data) {
      this.childAddNode(item, data);
      this.childDleteEvent(item, data); 
    },
    ///字节点添加数据
    childAddNode(item, data) {
      if (item.data.value == "add") {
        this.$refs.childtableinfo.paramters = {
          tableId: data.tableId,
          data: data.childs == undefined ? [] : data.childs,
          fieldKey: data.tableCode
        };
        this.$refs.childtableinfo.dialogTableInfoVisible = true;
        this.$refs.childtableinfo.InitTable(null);
      }
    },
    ///删除子节点
    childDleteEvent(item, data) {
      if (item.data.value == "delete") {
        let tables = this.$refs[data.tableCode + "form_child_tables"]
          .tableResult;
        let success = [];
        data.childs.forEach(function(item) {
          let rss = tables.filter(c => c.tableCode == item.tableCode);
          if (rss.length == 0) {
            success.push(item);
          }
        });
        data.childs = success;
      }
    },
    ///弹出框中的事件
    dialogChildConfirmEvent(res) {
      this.formModel.tables.forEach(e => {
        if (e.tableCode == res.key) {
          e.childs = res.result;
        }
      });
    },
    ///数据保存
    SaveEvent() {
      this.$refs["formData"].validate(valid => {
        if (valid) {
          this.$emit("FormEvent", this.formModel);
        } else {
          this.formLoading = false;
          return false;
        }
      });
    },
    ///返回时
    BackEvent() {
      this.$emit("FormEvent", null);
    }
  },
  mounted() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  }
};
</script>